<template>
    <a-layout>
      <a-layout-header>Header</a-layout-header>
      <a-layout-content class="ant-layout-content ">
        <img src="../../assets/professorlogo.png" alt="" class="logo">
  <a-form
        id="components-form-demo-normal-login"
        :form="form"
        class="login-form"
        @submit="handleSubmit"
    >
      <h2 class="title">专家系统登录</h2>
      <a-form-item>
        <a-input
            v-model="username"
            v-decorator="[
          'userName',
          { rules: [{ required: true, message: '请输入您的用户名！' }] },
        ]"
            placeholder="Username"
        >
          <a-icon slot="prefix" type="user" style="color: rgba(0,0,0,.25)" />
        </a-input>
      </a-form-item>
      <a-form-item>
        <a-input
            v-model="password"
            v-decorator="[
          'password',
          { rules: [{ required: true, message: '请输入您的登陆密码！' }] },
        ]"
            type="password"
            placeholder="Password"
        >
          <a-icon slot="prefix" type="lock" style="color: rgba(0,0,0,.25)" />
        </a-input>
      </a-form-item>
      <a-form-item>
        <a-checkbox
            v-decorator="[
          'remember',
          {
            valuePropName: 'checked',
            initialValue: true,
          },
        ]"
            class="remember"
        >
          记住我
        </a-checkbox>
        <a class="login-form-forgot" href="">
          忘记密码
        </a>
        <router-link to="/professorPage">
        <a-button type="primary" html-type="submit" class="login-form-button" @click="login()">
          登录
        </a-button>
        </router-link>
      <a href="">
        现在注册
      </a>
    </a-form-item>
  </a-form>
      </a-layout-content>
      <a-layout-footer class="ant-layout-footer">Footer</a-layout-footer>
    </a-layout>
</template>

<script>
export default {
  name: 'Login',
  data () {
    return {
      username: '',
      password: '',
    }
  },
  beforeCreate() {
    this.form = this.$form.createForm(this, { name: 'normal_login' });
  },
  methods: {
    handleSubmit(e) {
      e.preventDefault();
      this.form.validateFields((err, values) => {
        if (!err) {
          console.log('Received values of form: ', values);
        }
      });
    },
    login() {
      window.sessionStorage.setItem("username",this.username);
      window.sessionStorage.setItem("password",this.password);
      this.$router.push("/professorPage");
    }
  },
};
</script>

<style>
.logo{
  position: relative;
  left: -294px;
  top: 150px;
}
#nav {
  padding: 0;
}
#components-layout-demo-basic {
  text-align: center;
}
#components-layout-demo-basic .ant-layout-header,
#components-layout-demo-basic .ant-layout-footer {
  background: #7dbcea;
  color: #fff;
}
.ant-layout-footer {
  background-color: white;
}
#components-layout-demo-basic .ant-layout-sider {
  background: #3ba0e9;
  color: #fff;
  line-height: 120px;
}
.ant-layout-content{
  height: 450px;
}
#components-layout-demo-basic > .ant-layout {
  margin-bottom: 48px;
}
#components-layout-demo-basic > .ant-layout:last-child {
  margin: 0;
}
.title {
  color: #40a9ff;
  margin-top: 10px;
  margin-bottom: 20px;
  }
#components-form-demo-normal-login{
  margin: 0 auto;
  height: 329px;
  width: 350px;
  background-color: white;
  border: 1px solid #fafafa;
  border-radius: 5px;
  position: relative;
  top: -90px;
  left: 400px;
}
#normal_login_userName{
  margin-left: 37px;
  width: 270px;
}
#normal_login_password{
  margin-left:37px;
  width: 270px;
}
.remember{
  position: relative;
  left: 38px;
  float: left;
}
.login-form-forgot{
  position: relative;
  right: 38px;
}
#components-form-demo-normal-login .login-form {
  margin: 0 auto;
  max-width: 300px;
}
#components-form-demo-normal-login .login-form-forgot {
  float: right;
}
#components-form-demo-normal-login .login-form-button {
  margin-left: 34px;
  margin-right: 34px;
  width: 270px;
}
.ant-input-affix-wrapper .ant-input:not(:first-child) {
  padding-left: 5px;
}
</style>